<template>
	<view class="container" @tap="cleas">
		<view class="prompt">为防止上传非法内容，将进行人工审核后才可使用</view>
 		<view class="hader">
			<view class="hader_tit">
				<image class="tit_icon" src="https://dysx-h5.shjiuliwl.com/Eblock/images/教程.png"></image>
				<view class="tittext">未激活卡片</view>
				<view class="titright">未审核</view>
			</view>
			<view class="custom" v-if="card_inf">
				<image class="custom_img" :src="default_img"></image>
				<view class="custom_text">
					<view class="previewtext_tit">{{ default_main_tit }}</view>
					<view class="previewtext_sub_tit">{{ default_sub_tit }}</view>
				</view>
			</view>
		</view>
		<view class="fill">
			<view class="fill_item" @tap.stop="openmaintk">
				<view class="fill_name">主标题</view> 
				<view class="fill_tit">{{ default_main_tit }}</view>
				<image class="fill_icon" src="https://dysx-h5.shjiuliwl.com/Eblock/images/xiajiantou.png"></image>
			</view>
			<view class="fill_item" @tap.stop="opensubtk">
				<view class="fill_name">副标题</view>
				<view class="fill_tit">{{ default_sub_tit }}</view>
				<image class="fill_icon" src="https://dysx-h5.shjiuliwl.com/Eblock/images/xiajiantou.png"></image>
			</view>
			<view class="fill_item2">
				<view class="fill_name">默认封面图</view>
				<image class="fill_icon" src="https://dysx-h5.shjiuliwl.com/Eblock/images/xiajiantou.png"></image>
			</view>
			<view class="imgs">
				<view :class="item==default_img?'imgitem default':'imgitem'" v-for="(item,index) in useimgs" :key="index" @tap="defaultimg(item)">
					<image class="item" :src="item"></image>
					<image class="xzimg" v-show="item==default_img" src="https://dysx-h5.shjiuliwl.com/Eblock/images/txxz.png"></image>
				</view>
				<image class="imgs_item" v-show="useimgs.length<5" @tap="launch" src="https://dysx-h5.shjiuliwl.com/Eblock/images/gengduo.png"></image>
				<image class="imgs_item" v-show="useimgs.length>5" @tap="Putaway" src="https://dysx-h5.shjiuliwl.com/Eblock/images/shouqi.png"></image>
			</view>
			<view class="title">二维码管理</view>
			<view class="upimgs">
				<jade-image-upload
					:list="media"
					:control="control"
					:maxCount="maxCount"
					:compressSize="compressSize"
					:compressQuality="compressQuality"
					:compressWidth='compressWidth'
					:imageSize="imageSize"
					@chooseFile="chooseFile"
					@imgDelete="mediaDelete">
					</jade-image-upload>
			</view>
			<view class="title">二维码切换方式</view>
			<view class="optiontype">
				<view class="optiontype_item" v-for="(item,index) in optiontype" :key="index" @tap="switchuse(item.value)">
					<image class="optiontype_icon" v-show="defaulttype ==item.value" src="https://dysx-h5.shjiuliwl.com/Eblock/images/xaunzhong.png"></image>
					<image class="optiontype_icon" v-show="defaulttype !=item.value" src="https://dysx-h5.shjiuliwl.com/Eblock/images/weixuianzhong.png"></image>
					<view class="optiontype_text">{{ item.name }}</view>
				</view>
			</view>
			<view class="filprompt">{{ defaulttype==1?'根据二维码的优先顺序，平均展示给访问用户':'用户扫描二维码后将所上传的二维码随机一个进行展示' }}</view>
			<!-- 主标题弹框 -->
			<view class="choicemain" v-show="maintkvalue">
				<image class="title" src="https://dysx-h5.shjiuliwl.com/Eblock/images/shangsanjiao.png"></image>
				<view class="choicecenter">
					<view class="choicecentertit">选择卡片主标题</view>
					<scroll-view scroll-y="true" class="titscroll">
						<view class="mainalltit_item" v-for="(item,index) in lists.main_title_list" :key="index" @tap.stop="changemainTit(item)">
							<view class="imgblack">
								<uni-icons v-show="default_main_tit==item" type="checkmarkempty" size="22" color="rgba(255, 87, 51, 1)"></uni-icons>
							</view>
							<view :class="default_main_tit==item?'mainalltit_item_text default':'mainalltit_item_text'">{{ item }}</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<!-- 副标题弹框 -->
			<view class="choicemain" style="top: 200rpx;" v-show="subtkvalue">
				<image class="title" src="https://dysx-h5.shjiuliwl.com/Eblock/images/shangsanjiao.png"></image>
				<view class="choicecenter">
					<view class="choicecentertit">选择卡片副标题</view>
					<scroll-view scroll-y="true" class="titscroll">
						<view class="mainalltit_item" v-for="(item,index) in lists.sub_title_list" :key="index" @tap.stop="changesubTit(item)">
							<view class="imgblack">
								<uni-icons v-show="default_sub_tit==item" type="checkmarkempty" size="22" color="rgba(255, 87, 51, 1)"></uni-icons>
							</view>
							<view :class="default_sub_tit==item?'mainalltit_item_text default':'mainalltit_item_text'">{{ item }}</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<view class="buttons">
			<!-- <view class="buttonlook">预览微信名片</view> -->
			<view class="buttonsure" @tap="torequest">确认修改</view>
		</view>
	</view>
</template>

<script>
import { onGotApiData } from '../../utils/api.js';
import Card from '../../components/lists/card.vue'
export default {
	data() {
		return {
			code:'', //上个页面带过来的code值
			card_inf:{}, //查询返回所有卡片的信息
			phone:'', //绑定的手机号
			openid:'', // 返回的openid
			userId:'', // 用户userid
			lists:{}, //返回的全部数据
			useimgs:[], //使用的图片组
			imgs: [], // 一排图片
			allimgs: [], // 全部图片
			default_main_tit: '', //选中的主标题
			default_sub_tit: '', //选中的副标题
			default_img : '', // 选中的图片
			myupimg:'',//自己上传的照片
			optiontype:[
				{
					name:'轮询切换',
					value:1,
				},
				{
					name:'随机切换',
					value:2,
				},
			], 	//图片的随机顺序
			defaulttype:1,// 选中的顺序
			maintkvalue:false, //主标题的弹框
			subtkvalue:false, //副标题的弹框
			//以下是上传图片变量
			control: true,
			maxCount: 3,
			compressSize: 0.2,
			imageSize: 12,
			compressQuality: 0.8,
			compressWidth: 750,
			uploadTask: null,
			media: [], //数据源
		}
	},
	components: {
		'Card': Card
	},
	onLoad(options) {
		console.log('options',options)
		this.code = options.card_code
		// 获取code  查询会员信息
		this.userId = uni.getStorageSync('dysx_userId') || ''
		// 获取页面基础信息
		this.getbase()
		// 获取个人卡片信息
		this.getcardval()
	},
		// 页面初次渲染完成时执行的代码
	onReady() {

	},
		// 页面卸载时触发
	onUnload() {
		console.log('Page onUnload');
		this.cleas()
	},
	onshow(){	

	},
		// 页面隐藏时触发
	onHide() {
		console.log('Page onHide');
		this.maintkvalue = false
		this.subtkvalue = false
	},
	methods: {
		// 点击整个个页面关闭气泡
		cleas(){
			this.maintkvalue = false
			this.subtkvalue = false
		},
		// 获取个人卡片信息
		getcardval(){
			let params = {
				code:this.code,
			}
			onGotApiData('/wxxcx_api/card/v1/get','GET',params,this.getcardval_value)
		},
		getcardval_value(result){
			if(result.code){
				console.log('code',result)
				this.card_inf = result.data
				this.default_img = this.card_inf.card_picture
				this.default_main_tit = this.card_inf.card_name
				this.default_sub_tit = this.card_inf.card_describe
				this.defaulttype = this.card_inf.qr_switch_mode
				// 吧上传图片的结构给改变一下
				const imgs = this.card_inf.crad_qr_code.split(",");
				imgs.forEach((item,index) => {
					const obj  = {
						index:index,
						src:item,
					}
					this.media.push(obj)
				})
			}
		},
		// 获取页面基础信息
		getbase () {
			const params = {}
			onGotApiData('/api/title/list','GET',params,this.base_value)

		},
		// 获取基础信息结果
		base_value (result) {
			console.log('首页页面基础信息',result)
			this.lists = result.data
			// 使用map()方法遍历数组并截取每个元素的前四位
			this.imgs = this.lists.logo_list.slice(0, 4);
			console.log('this.imgs',this.imgs)
			this.allimgs = this.lists.logo_list
			this.useimgs = this.imgs 
			// 选中的先赋值
			// this.default_img = this.lists.logo_list[0]
			// this.default_main_tit = this.lists.main_title_list[0]
			// this.default_sub_tit = this.lists.sub_title_list[0]
		},
		// 图片展示区展开
		launch() {
			this.useimgs = this.allimgs 
		},
		// 图片区域收起
		Putaway(){
			this.useimgs = this.imgs 
		},
		// 点击展开主标题的弹框
		openmaintk(){
			this.subtkvalue = false
			this.maintkvalue = true
		},
		// 点击展开副标题的弹框
		opensubtk(){
			this.maintkvalue = false
			this.subtkvalue = true
		},
		// 选择主标题
		changemainTit (e) {
			console.log(e)
			this.default_main_tit = e
			setTimeout(()=>{
				this.maintkvalue = false
			},500)
		},
		// 选择副标题
		changesubTit (e) {
			console.log(e)
			this.default_sub_tit = e
			setTimeout(()=>{
				this.subtkvalue = false
			},500)
		},
		// 选中图片
		defaultimg (e) {
			console.log(e)
			this.default_img = e
		},
		//上传
		chooseFile(e) {
			console.log('上传图片返回1',e[0])
			this.uploadFileToServe(e[0])
		},
		//中断上传并删除
		mediaDelete(e) {
			this.uploadTask ? this.uploadTask.abort() : ''
			this.media.splice(e,1)
			console.log('this.media',this.media)
		},
		//上传逻辑处理
		uploadFileToServe(urlList) {
			if (!urlList || urlList.length <= 0) {
				return
			};
			this.uploadTask = uni.uploadFile({
				url: 'https://dysx-api.ksbmtb.com:8889/file/upload_img',
				filePath: urlList.src,
				name: 'file',
				success: (res) => {
					// console.log('上传图片返回2',res)
					let data = JSON.parse(res.data) 
					if (!data.data.url) {
						urlList.status = 'error'
						urlList.progress = '上传失败'
					} else {  
						urlList.status = 'success'
						urlList.progress = '上传成功'
						urlList.src = data.data.url
					}
				}
			});
			this.uploadTask.onProgressUpdate((res) => {
				urlList.percent = res.progress
				this.media.splice(urlList.index,1,urlList)
			})
			// console.log('上传图片返回3',this.uploadTask)
			console.log('上传图片返回4',this.media)
		},
		// 切换轮询的方式
		switchuse(e){
			this.defaulttype = e
		},
		// // 对于链接的校验
		// isurl (url) {
		// 	try {
		// 		new URL(url);
		// 		return true; 
		// 	}catch(err){ 
		// 		return false; 
		// 	}
		// },
		// 预览效果
		torequest () {

			if(this.media.length < 1){
				return uni.showToast({
					title: '请上传二维码',
					icon: 'none',
					//显示持续时间为 2秒
					duration: 2000
				})
			}
			let newStr = ''
			this.media.forEach((item,index)=>{
				if(newStr!=''){
					newStr = newStr + "," + item.src
				}else{
					newStr = item.src
				}
			})
			const params = {
				card_code:this.code,
				card_name:this.default_main_tit,
				card_describe: this.default_sub_tit,
				card_picture: this.default_img,
				user_id:this.userId,
				crad_qr_code: newStr,
				qr_switch_mode: this.defaulttype,
			}
			onGotApiData('/wxxcx_api/card/v1/update','POST',params,this.upcard)
		},
		// 返回的结果
		upcard (result) {
			console.log(result)
			if(result.code == 200){
				 uni.showToast({
					title: '卡片修改成功',
					icon: 'none',
					//显示持续时间为 2秒
					duration: 2000
				})
				setTimeout(()=>{
					uni.switchTab({
						url: '/pages/success/success'
					});
				},2000)
			}

		},
	}
}
</script>

<style scoped lang="scss">
	.container {
		width: 100vw;
		max-width: 750rpx;
		min-height: 100vh;
		margin: 0 auto;
		padding: 10rpx 0;
		overflow: auto;
		font-family: '思源黑体';
		background: linear-gradient(180deg, rgba(115, 149, 250, 1) 0%, rgba(68, 114, 252, 1) 75.7%, rgba(115, 149, 250, 0) 100%)no-repeat;
		background-size: 100% 30%;
		.prompt{
			width: 700rpx;
			height: 50rpx;
			font-size: 28rpx;
			line-height: 50rpx;
			margin: 0 auto;
			margin-top: 10rpx;
			margin-bottom: 20rpx;
			text-align: center;
			color: rgba(255, 255, 255, 1);
			// background-color: rgb(185, 192, 247);
		}																																																
		.hader{
			width: 710rpx;
			// height: 210rpx;
			border-radius: 10rpx;
			margin: 0 auto;
			margin-top: 10rpx;
			padding-bottom: 10rpx;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px 2px 4px  rgba(0, 0, 0, 0.25);
			.hader_tit{
				width: 710rpx;
				height: 80rpx;
				display: flex;
				justify-content: space-between;
				// border: 1px solid black;
				.tit_icon{
					width: 48rpx;
					height: 48rpx;
					// border: 1px solid black;
					margin: 15rpx;
				}
				.tittext{
					width: 500rpx;
					height: 80rpx;
					// border: 1px solid black;
					font-size: 28rpx;
					font-weight: 700;
					line-height: 74rpx;
					color: rgba(56, 56, 56, 1);
				}
				.titright{
					width: 160rpx;
					height:50rpx;
					border-radius: 0px 4px 0px 6px;
					background: linear-gradient(90deg, rgba(255, 124, 71, 1) 0%, rgba(255, 74, 3, 1) 100%);				
					font-size: 26rpx;
					line-height: 50rpx;
					color: rgba(255, 255, 255, 1);
					text-align: center;
				}
			}
			.custom{
				width: 710rpx;
				height: 220rpx;
				margin:  0 auto;
				border-radius: 12rpx;
				background: rgba(255, 255, 255, 1);
				box-shadow: -4px 5px 8px  rgba(0, 0, 0, 0.25);
				display: flex;
				.custom_img{
					width: 218rpx;
					height: 218rpx;
					border-radius: 12rpx;
					border: 1px dashed rgba(10, 54, 250, 1);
				}
				.custom_text{
					width: 490rpx;
					height: 220rpx;
					// border: 1px solid black;
					.previewtext_tit{
						width: 460rpx;
						height: 90rpx;
						font-size: 36rpx;
						font-weight: 400;
						line-height: 45rpx;
						margin: 40rpx 0 0 26rpx;
						// border: 1px solid black;
						color: rgb(0, 0, 0);
						white-space: nowrap; /* 不换行 */
						overflow: hidden; /* 超出部分隐藏 */
						text-overflow: ellipsis; /* 使用省略号表示被隐藏的部分 */
					}
					.previewtext_sub_tit{
						width: 460rpx;
						height: 80rpx;
						margin:  0 0 0 26rpx;
						font-size: 28rpx;
						// border: 1px solid black;
						font-weight: 400;
						line-height: 40rpx;
						color: rgba(128, 128, 128, 1);
						display: -webkit-box; /* 必须指定display属性 */
						overflow: hidden; /* 必须指定overflow属性 */
						text-overflow: ellipsis; /* 显示省略号 */
						max-height: 80rpx; /* 最大高度（根据需求调整）*/
						-webkit-line-clamp: 2; /* 最多显示的行数 */
						-webkit-box-orient: vertical; /* 必须指定box-orient属性 */
					}	
				}
			}
		}
		.fill{
			width: 710rpx;
			border-radius: 12rpx;
			margin: 0 auto;
			margin-top: 16rpx;
			padding: 40rpx 0;
			background: rgba(255, 255, 255, 1);
			box-shadow: -4px 5px 8px  rgba(0, 0, 0, 0.25);
			position: relative;
			.fill_item{
				width: 680rpx;
				height: 90rpx;
				margin: 0 auto;
				border-bottom: 1px solid rgba(242, 242, 242, 1);
				display: flex;
				justify-content: space-between;                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           
				.fill_name{
					width: 110rpx;
					height: 80rpx;
					font-size: 28rpx;
					font-weight: 700;
					line-height: 80rpx;
					color: rgba(56, 56, 56, 1);
					text-align: left;
					margin-left: 10rpx;
					// border: 1px solid black;
				}
				.fill_tit{
					width: 470rpx;
					height: 80rpx;
					font-size: 14px;
					font-weight: 400;
					letter-spacing: 0px;
					line-height: 80rpx;
					color: rgba(150, 149, 149, 1);
					// border: 1px solid black;
				}
				.fill_icon{
					width: 48rpx;
					height: 48rpx;
					margin: 16rpx 0;
				}
			}
			.fill_item2{
				width: 680rpx;
				height: 90rpx;
				margin: 0 auto;
				// border-bottom: 1px solid rgba(242, 242, 242, 1);
				display: flex;
				justify-content: space-between;
				.fill_name{
					width: 200rpx;
					height: 80rpx;
					font-size: 28rpx;
					font-weight: 700;
					line-height: 80rpx;
					color: rgba(56, 56, 56, 1);
					margin-left: 10rpx;
					text-align: left;
				}
				.fill_icon{
					width: 48rpx;
					height: 48rpx;
					margin: 16rpx 0;
				}
			}
			.imgs{
				width: 660rpx;
				// height: 200rpx;
				// border: 1px solid black;
				margin: 0 auto;
				display: grid;
				grid-template-columns: repeat(5, 1fr);
				// gap: 10px; /* 格子之间的间距 */
				.imgitem{
					width: 100rpx;
					height: 100rpx;
					border-radius: 8rpx;
					border: 6rpx solid #fff;
					position: relative;
					.item{
						width: 100rpx;
						height: 100rpx;
						border-radius: 8rpx;
					}
					.xzimg{
						width: 80rpx;
						height: 80rpx;
						position: absolute;
						top: -28rpx;
						left: 46rpx;
					}
				}
				.default{
					border: 6rpx solid rgba(250, 56, 12, 1);
				}
				.scimg{
					width: 112rpx;
					height: 112rpx;
					border-radius: 8rpx;
				}
			
				.imgs_item{
					width: 100rpx;
					height: 100rpx;
					margin: 14rpx;
				}
			}
			.title{
				width: 670rpx;
				height: 60rpx;
				// border: 1px solid black;
				margin: 0 auto;
				margin-top: 10rpx;
				margin-bottom: 10rpx;
				font-size: 28rpx;
				font-weight: 700;
				line-height: 60rpx;
				color: rgba(56, 56, 56, 1);
			}
			.upimgs{
					width: 660rpx;
					height: 200rpx;
					// padding: 10rpx 0;
					margin: 0 auto;
					// margin-top: 30rpx;
					// border: 1px solid black;
					display: flex;
					.imgitem{
						width: 150rpx;
						height: 150rpx;
						margin: 25rpx 20rpx 0 0;
						// background-color: pink;
						position: relative;
						.itemimg{
							width: 150rpx;
							height: 150rpx;
						}
						.cha{
							width: 32rpx;
							height: 32rpx;
							position: absolute;
							top: -6rpx;
							left: 130rpx;
						}
						.progress{
							width: 100rpx;
							height: 20rpx;
							border: 1px solid black;
						}
					}
					::v-deep .column-three{
						width: 180rpx;
						height: 180rpx;
					}
				}

			.optiontype{
				width: 680rpx;
				height: 70rpx;
				margin: 0 auto;
				margin-top: 20rpx;
				display: flex;
				.optiontype_item{
					width: 230rpx;
					height: 70prx;
					// border: 1px solid black;
					display: flex;
					.optiontype_icon{
						width: 38rpx;
						height: 38rpx;
						margin: 16rpx;
						font-size: 29rpx;
						line-height: 40rpx;
						color: rgba(56, 56, 56, 1);
					}
					.optiontype_text{
						width: 150rpx;
						height: 70rpx;
						line-height: 70rpx;
						font-size: 28rpx;
						color: rgba(56, 56, 56, 1);
					}
				}
			}
			.filprompt{
				width: 670rpx;
				height: 50rpx;
				border-radius: 8rpx;
				background: rgba(242, 242, 242, 1);
				margin: 0 auto;
				margin-top: 20rpx;
				font-size: 26rpx;
				line-height: 50rpx;
				color: rgba(3, 49, 255, 1);
				text-align: center;
			}
			// 点击主标题的弹框	
			.choicemain{
				position: absolute;
				z-index: 999;
				left: 25rpx;
				top: 100rpx;
				width: 660rpx;
				height: 700rpx;
				border-radius: 6px;
				background: rgba(255, 255, 255, 1);
				// border: 1px solid rgba(54, 104, 255, 1);
				// box-shadow: 3px 5px 15px  rgba(0, 0, 0, 0.25);
				.title{
					width: 60rpx;
					height: 30rpx;
					margin: 0 0 0 300rpx;
				}
				.choicecenter{
					width: 660rpx;
					height: 670rpx;
					border-radius: 6px;
					background: rgba(255, 255, 255, 1);
					border: 1px solid rgba(54, 104, 255, 1);
					box-shadow: 3px 5px 15px  rgba(0, 0, 0, 0.25);
					margin-top: -20rpx;
					.choicecentertit{
						width: 630rpx;
						height: 50rpx;
						padding-top: 16rpx;
						font-size: 32rpx;
						font-weight: 700;
						line-height: 50rpx;
						color: rgba(56, 56, 56, 1);
						margin: 0 auto;
					}
					.titscroll{
						width: 630rpx;
						height: 580rpx;
						margin: 0 auto;
						margin-top: 10rpx;
						// background-color: #f20;
						.mainalltit_item{
							width: 630rpx;
							height: 50rpx;
							margin: 10rpx;
							display: flex;
							.imgblack{
								width: 50rpx;
								height: 46rpx;
								padding-top: 3rpx;
								// border: 1px solid black;
							}
							.mainalltit_item_text{
								width: 550rpx;
								height: 50rpx;
								// border: 1p solid black;
								font-size: 28rpx;
								margin-left: 10rpx;
								white-space: nowrap; /* 不换行 */
								overflow: hidden;
								text-overflow: ellipsis; /* 使用省略号表示被隐藏的部分 */
							}
							.default{
								color: rgba(255, 87, 51, 1);
							}
						}
					}
				}
			}


		}
		.buttons{
			width: 710rpx;
			height: 100rpx;
			// background: pink;
			margin: 0 auto;
			margin-top: 50rpx;
			display: flex;
			justify-content: center;
			// justify-content: space-between;
			.buttonlook{
				width: 320rpx;
				height: 90rpx;
				border-radius: 60rpx;
				border: 1px solid rgba(91, 121, 252, 1);
				font-size: 32rpx;
				line-height: 90rpx;
				color: rgba(91, 121, 252, 1);
				text-align: center;
			}
			.buttonsure{
				width: 620rpx;
				height: 90rpx;
				border-radius: 60rpx;
				background: rgba(91, 121, 252, 100);
				box-shadow: 0px 8px 5px  rgba(0, 0, 0, 0.25);
				font-size: 32rpx;
				line-height: 90rpx;
				color: rgba(255, 255, 255, 1);
				text-align: center;
			}
		}

	}
</style>
